import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
import styels from "./echart.module.scss";

const EchartModelGaugeProgress = ({ color = "#7cffb2", state = 70 }) => {
    const ref = useRef();


    const setEchart = () => {

        var myChart = echarts.init(ref.current, 'dark');
        var option;
        myChart.clear();

        option = {
            backgroundColor: '', //设置无背景色
            splitNumber: 6, // 刻度数量
            min: 0, // 最小刻度
            max: 100,
            series: [
                {
                    color: color,
                    radius: '90%',
                    type: 'gauge',
                    progress: {
                        show: true,
                        width: 8
                    },
                    axisLine: {
                        lineStyle: {
                            width: 8,
                            // color: [ //空白环颜色
                            //     [1, "orange"],
                            // ]
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        length: 0,
                        lineStyle: {
                            width: 4,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        show: false,
                        distance: 2,
                        color: '#999',
                        fontSize: 12
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 12,
                        itemStyle: {
                            borderWidth: 2
                        }
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: [0, '70%'],
                        fontSize: 12,
                        fontWeight: 600,
                        formatter: '{value} %',
                    },
                    data: [
                        {
                            value: state
                        }
                    ]
                }
            ]
        };

        option && myChart.setOption(option);


    }




    useEffect(() => {
        setTimeout(() => {
            setEchart()
        }, 500)
    }, [ref])
    return (
        <>
            <div className={styels.box}>
                <div className="echart" ref={ref}></div>
            </div>
        </>
    )
}
export default EchartModelGaugeProgress;